<template>
  <a-modal
      v-model:open="isShow"
      title="订单履约周期"
      width="100%"
      wrap-class-name="bigDada-full-modal"
      @ok="handleOk"
      @cancel="handleOk"
      :okButtonProps="{ style: { display: 'none' } }"
  >
    <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
    <a-button type="primary" :loading="exportsLoading" @click="exports">选择导出</a-button>
    <a-button type="primary" style="margin-left: 10px" :loading="exportsAllLoading" @click="exportsAll">全部导出</a-button>
    <common-table
        :columns="columns"
        :dataSource="dataList"
        v-model:localPagination="page"
        @paginationChange="onPageChange"
        v-model:loading="loading"
        :rowKey="(record) => record.orderId"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :scroll="{ x: 'max-content'}"
    >
    </common-table>
  </a-modal>
</template>
<script setup>
import { ref,computed,watch } from 'vue'
import CommonTable from "@/components/commonTable/index.vue";
import CommonSearch from "@/components/commonSearch/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {orderCycle} from "@/api/bigData/pie.js";
import {getManyDictItems} from "@/api/system/dict.js";
import {postFile} from "@utils/service/index.js";
import {message} from "ant-design-vue";
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: orderCycle,
  queryFactory: () => ({

  }),
  beforeSearch:() => {
    if(query.value.time1){
      query.value.createdTimeBeginDate = query.value.time1[0]
      query.value.createdTimeEndDate = query.value.time1[1]
    }else{
      delete query.value.createdTimeBeginDate
      delete query.value.createdTimeEndDate
    }
    if(query.value.time2){
      query.value.deliveredTimeBeginDate = query.value.time2[0]
      query.value.deliveredTimeEndDate = query.value.time2[1]
    }else{
      delete query.value.deliveredTimeBeginDate
      delete query.value.deliveredTimeEndDate
    }
  }
});
const columns = [
  {
    title:'订单号',
    dataIndex:'orderId',
    align:'center',
  },
  {
    title:'平台',
    dataIndex:'platform',
    align:'center',
  },
  {
    title:'站点',
    dataIndex:'site',
    align:'center',
  },
  {
    title:'下单时间',
    dataIndex:'createdTime',
    align:'center',
  },
  {
    title:'销售国家',
    dataIndex:'country',
    align:'center',
  },
  {
    title:'所属区域',
    dataIndex:'shippingRegion',
    align:'center',
  },
  {
    title:'预计最晚送达日期',
    dataIndex:'latestDeliveryTime',
    align:'center',
  },
  {
    title:'最后包裹妥投时间',
    dataIndex:'deliveredTime',
    align:'center',
  },
  {
    title:'取消的物流单标识个数',
    dataIndex:'isCanceled',
    align:'center',
  },
  {
    title:'订单完结时间',
    dataIndex:'upsertTime',
    align:'center',
  },
  {
    title:'是否完成履约',
    dataIndex:'isShipped_dictText',
    align:'center',
  },
  {
    title:'是否及时履约',
    dataIndex:'isShippedInTime_dictText',
    align:'center',
  },
]
const selectedRowKeys = ref([])
const onSelectChange = (e) => {
  selectedRowKeys.value = e
  console.log(selectedRowKeys.value)
}
const formItems = ref([
  {
    label: '订单号',
    field: 'orderIds',
    type: 'input',
  },
  {
    label: '平台',
    field: 'platform',
    type: 'select',
    options: []
  },
  {
    label: '站点',
    field: 'site',
    type: 'select',
    options: []
  },
  {
    label: '国家',
    field: 'country',
    type: 'select',
    options: []
  },
  {
    label: '履约完成',
    field: 'isShipped',
    type: 'select',
    options: []
  },
  {
    label: '下单时间',
    field: 'time1',
    type: 'rangePicker',
    showTime: false,
  },
  {
    label: '最后包裹妥投时间',
    field: 'time2',
    type: 'rangePicker',
    showTime: false,
  },
])
const exportsLoading = ref(false)
const exportsAllLoading = ref(false)
const emit = defineEmits(['close'])
const handleOk = () => {
  emit('close')
}
const exports = async () => {
  try{
    exportsLoading.value = true
    if(selectedRowKeys.value.length === 0){
      message.error('请选择导出的订单')
      exportsLoading.value = false
      return
    }
    const res = await postFile('/index/order/fulfill/cycle/export/select','post',{
      orderIds: selectedRowKeys.value,
    },"履约周期.xlsx")
  }catch (e){
    message.error(e)
  }finally {
    exportsLoading.value = false
  }
}
const exportsAll = async () => {
  try{
    exportsAllLoading.value = true
    const res = await postFile('/index/order/fulfill/cycle/export/all','post',query.value,"履约周期.xlsx")
  }catch (e){
    message.error(e)
  }finally {
    exportsAllLoading.value = false
  }
}
const props = defineProps({
  open:{
    type: Boolean,
    default: false
  }
})
const isShow = computed(() => {
  return props.open
})
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"platform,site,country,fulfill_state"
    })
    formItems.value[1].options = res.result.platform
    formItems.value[2].options = res.result.site
    formItems.value[3].options = res.result.country
    formItems.value[4].options = res.result.fulfill_state
  }catch (e){
    console.log(e)
  }
}
watch(() => isShow.value,() => {
  init()
})
</script>
<style  lang="less">
.bigDada-full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
  }
  .ant-modal-body {
    flex: 1;
  }
}

</style>
